<template>
  <div>
    <el-form ref="form" :model="form" inline>
      <el-form-item label="校区" style="font-weight:bold;">
        <el-select v-model="form.campusId" placeholder="请选择校区" style="width:180px;" clearable>
          <el-option v-for="item in CampusList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="材料种类" style="font-weight:bold;">
        <el-select v-model="form.materialType" placeholder="请选择材料种类" style="width:180px" clearable>
          <el-option label="用水材料" value="用水材料"></el-option>
          <el-option label="用电材料" value="用电材料"></el-option>
          <el-option label="家具材料" value="家具材料"></el-option>
          <el-option label="综合材料" value="综合材料"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="材料名称" style="font-weight:bold;">
        <el-input v-model="form.materialName" style="width:180px" placeholder="请输入材料名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="使用时间" style="font-weight:bold;">
        <el-date-picker v-model="form.useTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd" style="width:180px;" clearable>
        </el-date-picker>
      </el-form-item>
      <el-button size="small" class="search_button" type="primary" icon="el-icon-search" @click="getForm">查询</el-button>
      <el-button size="small" class="reset_button" icon="el-icon-refresh" @click="reset">重置</el-button>
    </el-form>
    <el-table size="medium" :data="tableData" border>
      <el-table-column prop="campusName" label="校区" align="center">
      </el-table-column>
      <el-table-column prop="userName" label="使用人" align="center">
      </el-table-column>
      <el-table-column prop="userPhone" label="使用人电话" align="center">
      </el-table-column>
      <el-table-column prop="materialType" label="材料种类" align="center">
      </el-table-column>
      <el-table-column prop="materialName" label="材料名称" align="center">
      </el-table-column>
      <el-table-column prop="materialNum" label="材料数量" align="center">
      </el-table-column>
      <el-table-column prop="useTime" label="使用时间" align="center">
      </el-table-column>
      <el-table-column label="维修照片" align="center">
        <template slot-scope="scope">
          <el-button plain type="primary" @click="showImg(scope.row.repairImg)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="pagination" background layout="total, sizes, prev, pager, next, jumper" :total="total"
      :page-size="10" :page-sizes="[10, 20, 30, 40]" @current-change="handleCurrentChange"
      @size-change="handleSizeChange"></el-pagination>
    <el-dialog title="维修照片" :visible.sync="showPic" width="50%">
      <el-image style="width:200px" :src="picUrl" :preview-src-list="srcList" rel="no-referrer"></el-image>
    </el-dialog>
  </div>
</template>

<script>
import { getCampusName } from '_api/DormManage/Building/index.js'
import { getForm } from '_api/MaintainView/MaintainMaterial/index.js'

export default {
  data() {
    return {
      showPic: false,
      picUrl: "",
      form: {
        current: 0,
        pageSize: 10,
        campusId: "",
        materialType: "",
        materialName: "",
        useTime: ""
      },
      tableData: [],
      total: 0,
      CampusList: [],
      srcList: []
    }
  },
  created() {
    this.getCampusName()
    this.getForm()
  },
  methods: {
    showImg(e) {
      this.srcList = []
      this.showPic = true
      this.picUrl = e
      this.srcList.push(e)
    },
    //重置
    reset() {
      this.form = {
        current: 0,
        pageSize: 10,
        campusId: "",
        materialType: "",
        materialName: "",
        useTime: ""
      }
      this.getForm()
    },
    //当前页
    handleCurrentChange(e) {
      this.form.current = (e - 1) * 10
      this.getForm()
    },
    handleSizeChange(e) {
      this.form.pageSize = e
      this.getForm()
    },
    //查询校区名称
    getCampusName() {
      getCampusName().then(res => {
        console.log(res)
        if (res.status == 200) {
          this.CampusList = res.data.data
        }
      })
    },
    //查询维修单信息
    getForm() {
      getForm(this.form).then(res => {
        if (res.data.success == true) {
          this.tableData = res.data.data.list
          this.total = res.data.data.total
        } else {
          this.tableData = res.data.data
          this.total = ""
          this.$message.info(res.data.message)
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.pagination {
  float: right;
  margin-top: 10px;
}
</style>